Jekyll 테마 404 에러 해결

며칠 깃 블로그 관리 안하다가, 다시 여유되서 마크다운 파일 몇개 푸시했는데, 분명 존재하는 파일인데 404가 발생했다. 작성했던 페이지를 제대로 로드는 하지만, 해당 페이지 경로를 들어가도 작성했던 페이지가 뜨는게 아니라, 404가 뜨는 것이다. 특이하게 기존에 작성해뒀던 페이지들은 이상없이 잘 동작해서, 특정 경로에 띄어쓰기(공백)이 있어서인가 싶었으나 그것도 아니였다. 결국 로컬에서 jekyll을 설치하고, 한번 실행해가며 해결해나간 과정을 작성해본다. Readme.md Installation을 따르며, 단계를 빼먹지 말자. 처음 해당 블로그를 설치할 적, 단순히 fork한 후 내 입맛에 맞춰 _confing.yml파일 수정해서 page를 추가해나가는 식으로만 진행했다. 완전히 새로운 내용들 작성하는 것보다 기존 내용을 조금씩 수정하며 익숙해지는게 편해서였는데, 이로인해 빼먹은 내용들이 일부 있었다. 참고 : Jekyll 테마 적용 참고 링크의 과정들을 따르고나면, 이제 아래와 같은 과정을 따르면 좋을 것이다. 아래 작성하는 모든 과정은, Readme.md의 Installation 중 Method 2를 Window 환경에 맞춰서 풀어서 작성한 것이다. https://rubyinstaller.org/downloads/에서 ‘RubyInstallers with Devkit’을 다운받고, 설치한다. 다 설치되고나서 cmd창에서 열겠다고 그대로 진행하면, cmd 창에서 뭔가 많은 내용들이 뜨고 선택해서 설치하라는 내용이 나올 것이다. 그 중 MSYS2 and MINGW development toolchain에 해당하는 3번을 선택하기 위해, 3을 입력하고 엔터를 눌러준다. 이후 새로운 cmd 창을 열어서 gem install jekyll bundler 를 입력해주면, jekyll 설치가 진행된다. 필자는 여기서 한 번 막혔는데, PC 재부팅한 후 진행하니까 되서 혹시나 여기서 막힌다면 재부팅 해보는 것도 추천한다. 설치가 다 됐다면 jekyll -v를 입력해서 jekyll 버전이 뜨는지 확인할 수 있다. 현재 프로젝트({username}.github.io)의 Gemfile 최하단에 gem "jekyll-theme-satellite"를 작성해준다. 현재 프로젝트({username}.github.io) 위치에서 cmd를 열어준다. VScode로 진행 중이라면 그냥 해당 폴더(프로젝트)에서 터미널 열어주면 된다. 열어둔 cmd 창에 bundle install 을 입력해서 현재 프로젝트의 내용들을 설치해준다. 필자는 이 단계에서 an error occurred while installing wdm (0.1.1), and bundler cannot continue. 이런 에러가 뜨면서 진행이 불가했다. Newbie problems with wdm errors를 참고하여, 그냥 지우라는 말이 있길래 주석처리를 하고 진행해보았다. 이후 설치에 에러 없이 진행되는 것을 볼 수 있었다. 마지막으로 bundle exec jekyll serve 를 입력하여 로컬에서 jekyll 테마를 열 수 있다. 주소는 <localhost:4000>로 열린다. 일부 Warning 코드들이 발생하는데, 읽어보면 Sass 3.0.0. 에서 지워질 css 문법이라 주의하라는 내용으로 보인다. 추후 문제가 될 경우 수정해도 되지 않을까 생각되어 당장 건들지는 않았다. 무엇보다 Gemfile에 이것저것 버전 명시가 되어있으니 큰 문제는 없지 않을까 생각하기도 했다. 사실 특정 블로그 글을 보면 이렇게 jekyll 테마를 한번 실행해주면 문제가 발생하지 않는 듯하다.(보안상 이유) 필자의 경우, 추가로 /assets/img/thumbnail/empty.jpg 가 없다고 thumbnail 없는 포스트를 열 때 썸네일 로드를 못하는 오류가 있었다. 이는 내가 해당 폴더의 이미지들 쓸 일이 없겠지 생각해서 삭제했던 부분이었는데, 해당 오류가 발생하는 것을 확인한 후 원복시켰다. 아마 기존에 작성한 포스트도 썸네일을 비워뒀었는데, 그 때는 404 에러가 안 떳던걸 보면 해당 부분은 404 에러에 직접적인 영향은 없었으리라 생각된다. 다만 이것까지 하고나서 404 에러가 안 뜨는 것을 확인한만큼, 혹시나 하는 마음에 함께 작성해둔다.

[Jekyll-Theme] · 2024-11-28

로딩 화면 수정(시간 줄이기)

해당 테마는 다 좋았지만, 각 카테고리 넘어갈 때마다 로딩 화면이 나오고, 심지어 로딩 애니메이션이 갖는 시간이 길다는 점이 불편했다. 확인해보니 assets/js/subject.js 파일에서 로딩 애니메이션 시간이 0.75초로 설정된 것을 볼 수 있었다. // Loading page window.addEventListener("load", () => { var load_div = document.querySelector('#loading'); if(load_div != null){ setTimeout(function(){ load_div.style.transition = '.75s'; load_div.style.opacity = '0'; load_div.style.visibility = 'hidden'; }, 800); } }); 여기서 load_div.style.transition 값을 .25s 로 바꿔주면 로딩 애니메이션을 0.25초로 바꿔줄 수 있다. 인터넷만 빠르다면 이전보다 최소 0.5초는 로딩 시간을 줄일 수 있다. 수정 결과 // Loading page window.addEventListener("load", () => { var load_div = document.querySelector('#loading'); if(load_div != null){ setTimeout(function(){ load_div.style.transition = '.25s'; load_div.style.opacity = '0'; load_div.style.visibility = 'hidden'; }, 800); } }); 추가로 로딩 애니메이션 자체를 없애려면, _layouts/page.html 파일의 .inner-content 요소에서 include loading.html 부분을 주석처리해주면 된다. 다만 모든 로딩 애니메이션이 사라져서 좀 밋밋하기에, 필자는 주석처리를 하진 않았다.

[Jekyll-Theme] · 2024-11-17

좌측 하단의 Contact 아이콘 및 링크 수정

[Jekyll-Theme] · 2024-11-17

댓글 연동 및 방문자 수 확인

사실상 해당 테마의 docs 파일에서 확인 가능한 Comment System.md 과 Visitor Counter.md 내용을 보고 따라했다. 간단히 상세 단계를 한글로 작성했다 정도? Giscus를 활용한 댓글 연동 해당 블로그에서 댓글은 Giscus를 활용했는데, 이는 Github 레포지토리의 discussions 내용을 각 포스팅 하위에 댓글처럼 보여주는 앱이다. 그렇기에 별도의 DB를 필요로 하지 않아서 좋다! 현재 만들어둔 블로그 레포지토리(username.github.io)의 Settings→General→Features 에서 Discussions를 체크해준다. 현재 만들어둔 블로그 레포지토리(username.github.io)에 Giscus를 설치해준다. 스크린샷 촬영한 계정은 깡통계정이라 레포지토리가 없어서 All repositories만 나오는 것 같은데, username.github.io 로 레포지토리 만들었다면 선택 가능하다. 물론 그냥 All repositories로 해도 지장은 없을 것 같다. Giscus Guide에 접속해서, 자신의 저장소(username.github.io)를 입력해준다. 지금까지 진행한 모든 단계는 사실 해당 가이드라인에 잘 나와있다. Discussion 카테고리를 Q&A로 설정해준다. 하단에 생성된 giscus script의 값 일부를 _config.yml에 복사해서 넣는다. 위에서부터 순서대로 작성해주면 된다. 이렇게 하면 Giscus를 활용해서 Github 블로그에 댓글 만드는 건 끝났는데, 실제로 되는지는 해당 포스팅 하단에 댓글 달고 확인해봐야 할 것 같다. → 이상없이 Discussions에 작성되는 것 확인 완료! 기본적으로 Github 레포지토리의 discussions에 의견을 남기는 형식인만큼, 댓글을 남기려면 Github에 로그인해야 가능하다. GoatCount로 방문자 수 표시 이건 워낙 간단해서..여기 같이 쓰는 것도 있다. GoatCounter 회원가입을 일단 진행한다. Code : goatcounter 대시보드에 접속할 일종의 아이디? Site domain : 방문자 수 확인할 도메인 주소 Email address : goatcounter 가입 이메일 주소 Password : 8자리 이상 비밀번호 Fill in 9 here : 그냥 9 쓰면 됩니다.(사람 확인) 가입한 이메일로 수신한 확인용 링크를 클릭하면 가입완료된다. 필자는 스팸메일함에 있는줄 모르고 왜 가입이 안되나 헤맸다. Setting로 이동해서 Allow adding visitor counts on your website를 체크해준다. 가입할 때 작성한 Code값을 _config.yml의 goatcounter_code 값으로 넣어준다. 이렇게 하면 끝… 추가로 Setting에서 특정IP는 방문자수 체크에 무시할 수 있는데, Add your current IP 클릭하면 현재 접속해있는 IP값 그대로 넣을 수 있다. 블로그 운영자 IP는 방문자 수 체크에서 무시하려고 넣어둔 기능인 것 같다. 추가로 Data Collection 탭의 Region에 한국 코드가 없기에 KR만 추가해줌으로써 해당 세팅은 끝냈다. 아마 각 포스팅별 조회수를 보여주기 위한 연동 시스템인 것 같다.

[Jekyll-Theme] · 2024-11-17

폰트 변경하기

개인적으로 D2Coding 폰트를 접한 뒤로, 해당 폰트를 즐겨 사용하기에 해당 블로그도 D2Coding 폰트를 적용하였다. 메인페이지 : d2codingfont 해당 url에서 최신 버전 폰트 다운로드 필요한 폰트를 /assets/fonts/ 하위에 넣어둔다. 필자는 일반 폰트와 Bold 폰트만 다운받아서 넣어뒀다. _includes/head.html 에서 <style> 태그 안에 @font-face를 작성해준다. 해당 블로그는 일반 폰트는 400, Bold는 600으로 font-weight을 작성했는데, 기존 폰트들이 h 태그에 적용하는건 600, a, p 적용은 400으로 해둬서 동일하게 맞춰뒀다. 참고로 다른 폰트를 선호해서 다운받았는데 다른 확장자라면, format 안의 내용을 해당 확장자로 바꿔야 한다. @font-face { font-family: 'D2Coding'; font-style: normal; font-weight: 400; font-display: optional; src: local('D2Coding'), url("{{ site.baseurl }}/assets/fonts/D2Coding-Ver1.3.2-20180524.ttf") format("truetype"); } @font-face { font-family: 'D2CodingBold'; font-style: normal; font-weight: 600; font-display: optional; src: local('D2CodingBold'), url("{{ site.baseurl }}/assets/fonts/D2CodingBold-Ver1.3.2-20180524.ttf") format("truetype"); } 해당 파일 하단에 <script> 태그 안에 FontFaceObserver 와 이걸 load 하는걸 작성해주면 된다. D2Coding 폰트를 찾을 FontFaceObserver를 선언해주고, load 하는건 Promise.all() 안에 작성해줬다. const D2CNObserver = new FontFaceObserver('D2Coding'); const D2CBObserver = new FontFaceObserver('D2CodingBold'); Promise.all([ D2CNObserver.load(), D2CBObserver.load(), nunitoObserver.load(), righteousObserver.load(), latoObserver.load(), ]).then(function(){ document.documentElement.className += " fonts-loaded"; }); assets/css/style.scss 에서 font-family 적용된 부분에 D2Coding 폰트들을 추가해준다. D2Coding과 sans-serif를 제외한 다른 폰트들은 지워도 될 것 같지만, 추후 폰트를 변경할 수도 있을 것 같아 필자는 남겨뒀다. .fonts-loaded { a, span, p { font-family:"D2Coding", "Nunito Sans", 'Lucida Sans', sans-serif; } h1, h2, h3 { font-family:"D2Coding", "Lato", Helvetica, sans-serif; } mark { font-family:"D2CodingBold", 'Righteous', sans-serif; } } a { text-decoration:none; } a, span, p, h1, h2, h3, i { color:#3A241A; } a, span, p { font-family:"D2Coding", 'Lucida Sans', sans-serif; } h1, h2, h3, mark { margin:0; font-family:"D2CodingBold", Helvetica, sans-serif; } 다른 블로그 글들 보면 간단하게 scss 파일 별도로 만들어서 거기서 body 태그에 폰트 적용하기도 한다. 해당 방법이 빠르고 간단하지만, 최대한 기본 틀 유지를 하고 싶어서 이와 같이 진행해보았다. 구글에서 지원하는 외부 폰트를 적용하려면 간단히 @import 써서 적용할 수 있다. 다만 인터넷을 통해야하기에, 로딩이 좀 더 오래 걸릴 수 있다. @import url(https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

[Jekyll-Theme] · 2024-11-15

Jekyll 테마 적용

jekyll-theme-satellite 테마를 적용하여 현재 블로그를 만들었다. 메인페이지 : jekyll-theme-satellite 해당 url에서 이미지와 같은 버튼 둘 중 하나를 눌러, Github 페이지로 이동한다. Fork를 해서 자신의 Github에 해당 레포지토리를 복사해준다. 이 때, 레포지토리 이름은 (자신의 계정명).github.io 로 해준다. Settings > Pages > Branch 에서 메인이 되는 브랜치 선택(master) 후 save 해주면 된다. 일정 시간이 지난 후 (자신의 계정명).github.io으로 페이지가 열린다. 아무래도 변경 사항을 커밋했다고 해서 바로바로 반영이 되지 않으니 속도가 중요하다면 Gitblog는 좋지 못한 선택일 것 같다. 계정 당 하나의 페이지(~.github.io)만 호스팅 지원해주는 것 같으니, 다른 성격의 개인 페이지를 열고 싶다면 또다른 계정 사용이 필요하다. 무엇보다 서버 단에서 구동되는 언어는 지원 안해준다고 전에 봤던 것으로 기억하니, 직접 개인 페이지를 제작하고 싶다면 JS로 해야하는게 필수. 위와 같이 Github에서만 모든 과정을 진행하니, 자신만의 페이지로 꾸밀 때 404 에러가 발생하는 것 같다. 아래 추가 작성한 내용을 참고하여 Readme.md의 Installaion을 전부 따르는게 좋을 것 같다. 참고 : Jekyll 테마 404 에러 해결

[Jekyll-Theme] · 2024-11-15

kangspa.com

About Me

[Jekyll-Theme]